<template>
  <!-- 模板 -->
  <div class="w100 h100" ref="charts"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { nextTick, onMounted, ref, watch } from "vue";

const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({}),
  },
});

const charts = ref();
let myChart = null;

const initData = () => {
  props.chartData && initChart();
};
const initChart = () => {
  if (!myChart) {
    myChart = echarts.init(charts.value);
  }
  myChart.showLoading();
  myChart.hideLoading();
  console.log("myChart :>> ", myChart);
  let option = {
  };
  myChart.setOption(option, true);
};

onMounted(() => {
  nextTick(() => {
    initData();
  });
});
watch(
  () => props.chartData,
  (n) => {
    if (n) {
      myChart && initData();
    }
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped></style>
